import QtQuick
import CustomizedComponents

Item {
    id: root

    // 颜色属性
    property color normalColor: "transparent"     // 正常颜色
    property double darkerFactor: 0.1
    property bool isHovered: false
    property color hoveredColor: Qt.darker(normalColor, 1 + darkerFactor)    // 悬浮颜色
    property bool isPressed: false
    property color pressedColor: Qt.darker(normalColor, 1 + 2 * darkerFactor)    // 按下颜色

    // 形状属性
    property real radiusProportion: 0.3
    property int radius: {
        width > height ? height * radiusProportion : width * radiusProportion;
    }                  // 圆角大小

    // 边框属性
    property int borderWidth: 0               // 边框宽度
    property color borderColor: "#000000"     // 边框颜色

    // 透明度属性
    opacity: 1.0

    // 动画时间
    property int animationDuration: 100

    // 信号
    signal clicked
    signal pressed
    signal released

    Rectangle {
        id: rec
        anchors.fill: parent
        color: root.normalColor

        radius: root.radius
        clip: true
        border.width: root.borderWidth
        border.color: root.borderColor

        MouseArea {
            id: mouseArea

            anchors.fill: parent
            cursorShape: Qt.PointingHandCursor

            HoverHandler {
                id: hoverHandler
                onHoveredChanged: {
                    root.isHovered = hovered;
                }
            }

            Connections {
                target: mouseArea
                function onPressed() {
                    root.isPressed = true;
                    root.pressed();
                }
                function onReleased() {
                    root.isPressed = false;
                    root.released();
                }
                function onClicked() {
                    root.clicked();
                }
            }
        }

        states: [
            State {
                name: ""
                PropertyChanges {
                    rec.color: root.normalColor
                }
            },
            State {
                name: "hovered"
                PropertyChanges {
                    rec.color: root.hoveredColor
                }
            },
            State {
                name: "pressed"
                PropertyChanges {
                    rec.color: root.pressedColor
                }
            }
        ]
    }

    transitions: [
        Transition {
            from: "*"
            to: "*"

            ColorAnimation {
                target: rec
                properties: 'color'
                duration: root.animationDuration
            }
        }
    ]

    onIsHoveredChanged: {
        buttonStateChanged();
    }
    onIsPressedChanged: {
        buttonStateChanged();
    }

    function buttonStateChanged() {
        if (root.isPressed) {
            rec.state = "pressed";
        } else if (root.isHovered) {
            rec.state = "hovered";
        } else {
            rec.state = "";
        }
    }
}
